<template>
  <div class="newalblum">
    <div class="category">
      <!-- 左边分类 -->
      <div class="left">
        <span
          :class="{ active: areaType == item.album }"
          :style="{ color: areaType == item.album ? themeColor : '' }"
          class="type-item"
          v-for="(item, index) of category"
          :key="index"
          @click="onClickcategory(item.album)"
          >{{ item.name }}</span
        >
      </div>
      <div class="right">
        <!-- 新碟上架-右边分类 -->
        <div class="right-album">
          <span
            :class="{ active: item.type == albumType }"
            :style="{ color: item.type == albumType ? themeColor : '' }"
            class="right-album-item"
            v-for="(item, index) of leftCategory"
            :key="index"
            @click="onClickarea(item.type)"
            >{{ item.name }}</span
          >
        </div>
      </div>
    </div>
    <!-- 本周热碟 -->
    <div class="hot-box">
      <ch-hotalbum
        v-if="weekData !== undefined"
        :title="'本周新碟'"
        :themeColor="themeColor"
        :weekData="weekData"
      />
    </div>
    <div class="hot-box">
      <ch-hotalbum
        :title="date"
        :themeColor="themeColor"
        :weekData="newDisc"
        v-infinite-scroll="load"
        infinite-scroll-delay="300"
      />
    </div>
  </div>
</template>

<script>
import HotAlbum from "./hotalbum";
import { getTopAlbum, getNewAlbum } from "@/api/album";
export default {
  name: "newalblum",
  components: {
    "ch-hotalbum": HotAlbum
  },
  props: {},
  data() {
    return {
      themecolor: localStorage.getItem("themeColor"), // 颜色
      category: [
        { name: "全部", type: 0, album: "ALL" },
        { name: "华宇", type: 7, album: "ZH" },
        { name: "欧美", type: 96, album: "EA" },
        { name: "日本", type: 8, album: "KR" },
        { name: "韩国", type: 16, album: "JP" }
      ],
      areaType: "ALL", // 切换分类

      leftCategory: [
        { name: "全部", type: "new" },
        { name: "热门", type: "hot" }
      ],
      albumType: "hot", // 新碟上架 全部 热门
      weekData: [], // 本周热碟
      page: 1,
      monthData: [], //本月新碟
      newDisc: [], // 传数组
      date: "" // 时间
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    }
  },
  watch: {
    $route() {
      this.getTopAlbum();
    }
  },
  created() {
    this.albumType =
      this.$route.query.type !== undefined ? this.$route.query.type : "hot";
    this.areaType =
      this.$route.query.area !== undefined ? this.$route.query.area : "ALL";
    this.getTopAlbum();
    this.getNewAlbum();
    this.Date();
    // //下拉加载
    // this.load()
  },
  mounted() {},
  methods: {
    // 点击切花分类
    onClickcategory(area) {
      this.monthData = [];
      this.weekData = [];
      this.newDisc = [];
      this.areaType = area;
      this.$router.push({
        name: "newDisc",
        query: {
          area,
          type: this.albumType
        }
      });
    },
    // 新碟 全部，热门
    onClickarea(type) {
      this.monthData = [];
      this.weekData = [];
      this.newDisc = [];
      this.albumType = type;
      this.$router.push({
        name: "newDisc",
        query: {
          area: this.areaType,
          type
        }
      });
    },
    Date() {
      let date = new Date();
      let Y = date.getFullYear();
      let M = date.getMonth() + 1;
      this.date = `${Y}年${M}月`;
    },
    async getTopAlbum() {
      this.showLoading();
      const { data } = await getTopAlbum({
        area:
          this.$route.query.area !== undefined
            ? this.$route.query.area
            : this.areaType,
        type:
          this.$route.query.type !== undefined
            ? this.$route.query.type
            : this.albumType
      });
      if (data.code === 200) {
        this.closeLoading();
      }
      this.weekData = data.weekData;
      this.monthData = data.monthData;
      this.newDisc.push(...this.monthData.splice(0, 30));
    },
    async getNewAlbum() {
      await getNewAlbum({
        area: "ALL"
      });
    },
    load() {
      this.newDisc.push(...this.monthData.splice(0, 30));
    }
  }
};
</script>

<style scoped lang="scss">
.category {
  width: 100%;
  height: 1.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    .type-item {
      display: inline-block;
      //   width: 3.75rem;
      //   height: 1.875rem;
      //   text-align: center;
      //   line-height: 1.875rem;
      cursor: pointer;
      padding: 0.125rem 0.625rem;
      margin-right: 1.5625rem;
    }
  }
  .right {
    .right-album {
      .right-album-item {
        display: inline-block;
        // width: 3.75rem;
        // height: 1.875rem;
        // text-align: center;
        // line-height: 1.875rem;
        cursor: pointer;
        padding: 0.125rem 0.625rem;
        cursor: pointer;
        margin-right: 1.5625rem;
      }
    }
  }
  .active {
    font-size: 0.875rem;
    border-radius: 1.25rem;
    background: rgba($color: #bbbbbb, $alpha: 0.1);
    //   background: rgba($color: #000000, $alpha: 1.0);
  }
}
</style>
